import React, { useContext } from 'react';
import { useRequest } from 'ahooks';
import { Row, Typography } from 'antd';
import PieChart from '@/components/MarketingMap/PieChart';
import DateFrom from '@/components/MarketingMap/DateFrom';
import BarChart from '@/components/MarketingMap/BarChart';
import CustomCard from '@/components/MarketingMap/CustomCard';
import { fetchPersona } from '@/services/marketingMap/outflowAnalysis';
import { isCategory, sortByKey } from '@/utils/marketingMap/utils';
import OverallContext from '../context';
import styles from '../styles/panel.less';
import TipMessage from '@/components/MarketingMap/TipMessage';
import BarEchart from '@/components/MarketingMap/BarEchart';

const order = [
  '≤300元',
  '300~700元(含)',
  '700~1200元(含)',
  '1200~2000元(含)',
  '2000~5000元(含)',
  '>5000元',
];

const UserProfile: React.FC = () => {
  const { query, date, onSubmit } = useContext(OverallContext);

  const { data, run, loading } = useRequest(() => fetchPersona(query), {
    refreshDeps: [query],
    refreshDepsAction: () => {
      if (!query.store) {
        return;
      }
      run();
    },
  });

  return (
    <div className={styles.sidenar_wrapper}>
      <DateFrom value={date} onChange={onSubmit} />
      <div>
        <Typography className={styles.title} style={{ paddingBottom: 0 }}>
          <Typography.Text strong>流出人群分布</Typography.Text>
        </Typography>
        <CustomCard
          loading={loading}
          empty={!data?.[0]?.length}
          style={{ marginTop: 12 }}
          title={<Typography.Text strong>车系分布</Typography.Text>}
          extra={<Typography.Text style={{ fontSize: 12 }}>售后（次）</Typography.Text>}
        >
          <PieChart
            name="车系分布"
            title="全部售后"
            data={sortByKey(data?.[0], 'count')?.map(
              (item: { name: string; count: any; percent: string }) => ({
                name: item.name,
                value: item.count,
                percent: item.percent + '%',
              }),
            )}
          />
        </CustomCard>
        <CustomCard
          loading={loading}
          style={{ marginTop: 12 }}
          empty={!data?.[1]?.length}
          title={<Typography.Text strong>售后项目分布</Typography.Text>}
          extra={<Typography.Text style={{ fontSize: 12 }}>售后（次）</Typography.Text>}
        >
          <PieChart
            name="售后项目分布"
            title="全部售后"
            data={data?.[1]?.map((item: { name: string; count: any; percent: string }) => ({
              name: item.name,
              value: item.count,
              percent: item.percent + '%',
            }))}
            // data={mapper.map((key, index) => ({
            //   name: key,
            //   value:
            //     data?.projectData?.find((item: { type: number }) => item.type === index)?.count ||
            //     0,
            //   percent:
            //     (data?.projectData?.find((item: { type: number }) => item.type === index)
            //       ?.percent || 0) + '%',
            // }))}
            // data={data?.projectData?.map((item: { type: number; count: any; percent: string }) => ({
            //   name: mapper[item.type],
            //   value: item.count,
            //   percent: item.percent + '%',
            // }))}
          />
        </CustomCard>
      </div>
      <CustomCard
        loading={loading}
        empty={!data?.[2]?.length}
        style={{ marginTop: 12 }}
        title={
          <TipMessage name="流出收入分布">
            <Typography.Text strong>流出收入分布</Typography.Text>
          </TipMessage>
        }
      >
        <BarChart
          title="流出收入分布"
          name="车辆(台)"
          left="92"
          pl={10}
          config={{
            type: 'bar',
            barGap: 5,
            label: {
              show: true,
              position: 'bottom',
              formatter: (params: { seriesName: string }) =>
                params.seriesName.replace(/\(含\)/, ''),
            },
          }}
          data={data?.[2]
            ?.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name))
            ?.map((item: { name: any; count: any }) => ({
              name: item.name,
              data: [item?.count || 0],
            }))}
          // data={amountMap.map((key, index) => ({
          //   name: key,
          //   data: [
          //     data?.incomeData?.find((item: { type: number }) => item.type === index)?.count || 0,
          //   ],
          // }))}
        />
      </CustomCard>
      <CustomCard
        loading={loading}
        empty={!data?.[3]?.length}
        style={{ marginTop: 12 }}
        title={
          <Row align="bottom" style={{ gap: 6 }}>
            <Typography.Text strong>流出用户年龄分布</Typography.Text>
            {isCategory(data?.[3])  && (
              <span style={{ fontSize: 12 }}>(无法判断性别年龄 {data[3][0].vins}人)</span>
            )}
          </Row>
        }
      >
        <BarEchart title="用户年龄分布" name="用户数（个）" data={data?.[3]} />
      </CustomCard>
    </div>
  );
};

export default UserProfile;
